<template>
  <view class="study-container">
    <view class="study-item" v-for="(item, index) in studyProgresses" :key="index">
      <image :src="item.icon" alt />
      <view class="meta">
        <text class="title">{{item.title}}</text>
        <text class="progress">已学习{{item.study_hour}}课时/{{item.total_hour || 0}}课时</text>
      </view>
      <view class="circle">
        <van-circle
          :value="item.study_progress"
          layer-color="#eeeeee"
          :color="item.color"
          :text="item.study_progress+'%'"
          size="55"
        />
      </view>
    </view>
    <view v-if="studyProgresses.length===0">
      <text class="no-study-tip">您还没有任何学习记录哦，赶快去学习吧~</text>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      studyProgresses: [],
    };
  },
  onLoad() {
    this.getstudyProgresses();
  },
  methods: {
    async getstudyProgresses() {
      const res = await request({ url: "study/progress" });
      console.log(res);
      res.data.message.forEach((item) => {
        if (item.study_progress <= 30) {
          item.color = "#ee0a24";
        } else if (item.study_progress <= 80) {
          item.color = "#ff9929";
        } else {
          item.color = "#007acc";
        }
      });
      if (res.data.status === 0) {
        this.studyProgresses = res.data.message;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.study-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 32rpx;
  align-items: center;
  position: relative;
}

.study-item {
  margin-top: 32rpx;
  background-color: #fff;
  border-radius: 12rpx;
  width: 686rpx;
  height: 220rpx;
  display: flex;
  align-items: center;
}

.study-item image {
  width: 108rpx;
  height: 108rpx;
  margin-left: 50rpx;
}

.study-item .meta {
  flex: 1;
  margin-left: 50rpx;
  display: flex;
  flex-direction: column;
}

.study-item .meta .title {
  font-size: 30rpx;
  color: #333333;
}

.study-item .meta .progress {
  margin-top: 10rpx;
  font-size: 22rpx;
  color: #a8a8a8;
}

.circle {
  width: 109rpx;
  height: 109rpx;
  margin-right: 56rpx;
}

.no-study-tip {
  margin-top: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500rpx;
  font-size: 15px;
}
</style>
